<template>
  <view class="search" :style="{padding: padding, background: bgColor}">
    <view class="search-item">
      <u-search :placeholder="placeholder" v-model="keyword" @change="handleSearch" @custom="handleSearch" @search="handleSearch" bgColor="transparent"></u-search>
      <view class="search-item-but" @click="handleSearch()">搜索</view>
    </view>
  </view>
</template>
<script>
export default {
  name: "l-search",
  data() {
    return {
      keyword: ""
    }
  },
  props: {
    padding: {
      type: String,
      default: '20rpx'
    },
    bgColor: {
      type: String,
      default: '#fff'
    },
    placeholder: {
      type: String,
      default: '商品名称、关键字'
    },
    placeholderColor: {
      type: String,
      default: '#020530'
    }
  },
  methods: {
    handleSearch() {
      this.$emit('search', this.keyword)
    }
  },
}
</script>
<style scoped lang="scss">
$search-solid: $solid-main;
$search-bg: $color-main;

.search {

  &-item {
    padding: 2rpx 4rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 2rpx solid $search-solid;
    border-radius: 200rpx;

    &-but {
      margin-left: 20rpx;
      flex-shrink: 0;
      width: 120rpx;
      height: 60rpx;
      background: $search-bg;
      color: #fff;
      text-align: center;
      line-height: 60rpx;
      font-size: 32rpx;
      border-radius: 200rpx;
    }
  }
}
</style>